import React, { Component } from 'react'
import { Modal, Row, Col, Table } from 'antd'
import api from '../../../api'
import T from '../../../lib/T'
import { connect } from 'mirrorx'
import IconDom from '../../../component/IconDom'
import QRCode from 'qrcode.react'

let lock = false
class Preview extends Component {
  constructor (props) {
    super(props)
    this.state = {
      data: {
        planResponseDTOList: [],
        liabilityResponseDTOList: [],
        planLiabilityRelationResponseDTOList: []
      },
      liaList: [],
      planList: []
    }
    this.handleCancel = this.handleCancel.bind(this)
  }
  handleCancel () {
    lock = false
    this.setState({
      promotionData: null,
      liaList: [],
      planList: []
    }, () => {
      this.props.cancelVisible()
    })
    console.log('this.state.', this.state.promotionData)
  }
  componentWillReceiveProps (nextProps) {
    console.log('nextProps', nextProps)
    let { visible, promotionData } = nextProps
    this.setState({
      visible
    })
    if (promotionData) {
      this.setState({
        promotionData
      })
    }
    if (promotionData && promotionData.channelGoodsId) {
      this.queryChannelGoodsPlanTablesData(promotionData.channelGoodsId)
    }
  }
  queryChannelGoodsPlanTablesData (channelGoodsId) {
    if (lock) return false
    lock = true
    T.ajax({
      url: api.queryChannelGoodsPlanTablesData.path,
      loading: true,
      data: { channelGoodsId }
    }).then(res => {
      if (res && res.code === 0) {
        let obj = {}
        obj = this.handleTable(res.data)
        this.setState({
          data: res.data,
          lock: true,
          liaList: obj.liaList,
          planList: obj.planList
        })
      }
    })
  }
  getSrc (code) {
    let src = `/ajax/proxy/api/goods/file/downloadFile?fileUniqueCode=${code}`
    return src
  }
  handleTable (data) {
    let { planResponseDTOList: planList = [], liabilityResponseDTOList: liaList = [], planLiabilityRelationResponseDTOList: reList } = data
    console.log('planlist', planList)
    planList.map((item) => {
      item.key = item.planId
      item.align = 'center'
      item.dataIndex = item.planId
      item.title = item.planName
      return item
    })
    planList.unshift({
      key: 0,
      align: 'center',
      dataIndex: 'liabilityName',
      title: ''
    })
    liaList.map(item => {
      reList.forEach(re => {
        if (item.liabilityId === re.liabilityId) {
          let key = re.planId
          item[key] = re.coverage
          item.key = item.liabilityId
        }
      })
      return item
    })
    return {
      liaList,
      planList
    }
  }
  handleImg (channelGoodsMediaDTOList) {
    let mainSrc = ''
    let subSrc = ''
    let detailSrc = ''
    let claimSrc = ''
    let additionalList = []
    channelGoodsMediaDTOList.forEach(item => {
      let mediaCategory = item.mediaCategory
      mediaCategory === 1 && (mainSrc = this.getSrc(item.fileCode))
      mediaCategory === 2 && (subSrc = this.getSrc(item.fileCode))
      mediaCategory === 3 && (detailSrc = this.getSrc(item.fileCode))
      mediaCategory === 4 && (claimSrc = this.getSrc(item.fileCode))
      if (mediaCategory === 5) {
        let src = this.getSrc(item.fileCode)
        additionalList.push(src)
      }
    })
    return {
      mainSrc,
      subSrc,
      detailSrc,
      claimSrc,
      additionalList
    }
  }
  render () {
    let { planList = [], liaList = [] } = this.state
    let { promotionData } = this.state
    let introduction = ''
    let productName = ''
    let insurerName = ''
    let categoryName = ''
    let imgObj = {}
    let questionList = []
    let maxQuantity = ''
    let minPremium = ''
    let onlinePeriodEndStr = ''
    let onlinePeriodStartStr = ''
    let channelGoodsName = ''
    let channelGoodsId = ''
    let { mainSrc, subSrc, detailSrc, claimSrc, additionalList = [] } = imgObj
    if (promotionData) {
      // 组装渲染的字段
      introduction = promotionData.introduction
      productName = promotionData.productName
      insurerName = promotionData.insurerName
      categoryName = promotionData.categoryName
      channelGoodsId = promotionData.channelGoodsId
      channelGoodsName = promotionData.channelGoodsName
      if (promotionData.channelGoodsMediaDTOList) {
        // 图片
        imgObj = this.handleImg(promotionData.channelGoodsMediaDTOList)
        mainSrc = imgObj.mainSrc
        subSrc = imgObj.subSrc
        detailSrc = imgObj.detailSrc
        claimSrc = imgObj.claimSrc
        additionalList = imgObj.additionalList
      }
      if (promotionData.channelGoodsFaqDTOList) {
        // 问题列表
        questionList = promotionData.channelGoodsFaqDTOList
      }
      // 销售信息
      if (promotionData.channelGoodsSaleInfoDTO) {
        maxQuantity = promotionData.channelGoodsSaleInfoDTO.maxQuantity
        minPremium = promotionData.channelGoodsSaleInfoDTO.minPremium
        onlinePeriodEndStr = promotionData.channelGoodsSaleInfoDTO.onlinePeriodEndStr
        onlinePeriodStartStr = promotionData.channelGoodsSaleInfoDTO.onlinePeriodStartStr
      }
    }
    let { userInfo, viewTips } = this.props
    let mobileUrl = `yfyb-fusion-za-fusion-mobile-mall.test.za-tech.net/product-details?prdId=${channelGoodsId}`
    return (
      <div>
        <Modal
          onCancel={this.handleCancel}
          title={channelGoodsName}
          visible={this.props.visible}
          footer={null}
          wrapClassName='medical-modal'
          maskStyle={{ background: 'rgba(0, 0, 0, 0.5)' }}>
          <div className='pl60 pr60 f12'>
            <span className='view-tips'>{viewTips}</span>
            <div className='mb20'>
              <span className='label'>URL:</span>
              <span className='value mt10'>{mobileUrl}</span>
            </div>
            <div className='mb50'>
              <span className='label'>QR code:</span>
              <QRCode value={mobileUrl} />
            </div>
            <Row className='mb30'>
              <Col span={12}>
                <span className='fc0'>My Promotion Channel：</span>
                <span>{userInfo && userInfo.channelCompanyName}</span>
              </Col>
              <Col span={12}>
                <span className='fc0'>Insurance Company：</span>
                <span>{insurerName}</span>
              </Col>
            </Row>
            <div className='pl25 pr25 mb30'>
              <Row className='mt30 mb30'>
                <Col span={12}>
                  <span className='fc0'>Insurance Product：</span>
                  <span>{productName}</span>
                </Col>
                <Col span={12}>
                  <span className='fc0'>Product Category：</span>
                  <span>{categoryName}</span>
                </Col>
              </Row>
              <div className='pl20 pr20'>
                <div className='fc0 mb10'>Insurance Plan：</div>
                <div className='pl35 pr35'>
                  <Table
                    columns={planList}
                    rowKey='liabilityId'
                    dataSource={liaList}
                    pagination={false} bordered />
                </div>
              </div>
            </div>
            <div className='pl25 pr25 mb30'>
              <div className='fc0 mb10'>Service information：</div>
              <div className='pl60 pr60'>
                <Row className='mb30'>
                  <Col span={12}>
                    <div className='fc0 mb5'>Main Cover</div>
                    {
                      mainSrc
                        ? <img src={mainSrc} width='240' height='240' />
                        : <span className='no-image'>
                          <IconDom code='icon-no-image' />
                        </span>
                    }

                  </Col>
                  <Col span={12}>
                    <div className='fc0 mb5'>Channel Goods Sub Cover</div>
                    {
                      subSrc ? <img src={subSrc} width='240' height='240' />
                        : <span className='no-image'>
                          <IconDom code='icon-no-image' />
                        </span>
                    }
                  </Col>
                </Row>
              </div>
            </div>
            <div className='pl25 pr25 mb30'>
              <div className='fc0 left-con'>Insurance Product：</div>
              <div className='right-con'>
                {introduction}
              </div>
              <div className='pl60 pr60 mt30 mb30'>
                <Row className='mb30'>
                  <Col span={12}>
                    <div className='fc0 mb5'>Product Features</div>
                    {
                      detailSrc
                        ? <img src={detailSrc} width='240' height='240' />
                        : <span className='no-image'>
                          <IconDom code='icon-no-image' />
                        </span>
                    }
                  </Col>
                  <Col span={12}>
                    <div className='fc0 mb5'>Claims Process</div>
                    {
                      claimSrc
                        ? <img src={claimSrc} width='240' height='240' />
                        : <span className='no-image'>
                          <IconDom code='icon-no-image' />
                        </span>
                    }
                  </Col>
                </Row>
              </div>
              <div className='pl20 pr20'>
                <div className='left-con tac'>Common Q&A：</div>
                <div className='right-con'>
                  {
                    questionList.map((item, index) => {
                      return <div className='mb20'>
                        <div>{item.question}</div>
                        <div className='mt6'>
                          {item.answer}
                        </div>
                      </div>
                    })
                  }
                </div>
              </div>
              <div className='pl20 pr20 mb30'>
                <div className='fc0 mb5'>Additional Info：</div>
                <div className='pl40 pr10'>
                  {
                    additionalList.length > 0
                      ? additionalList.map(item => {
                        return <img
                          className='mt10 mr10 mb10'
                          src={item} width='200' />
                      })
                      : <span className='no-image'>
                        <IconDom code='icon-no-image' />
                      </span>
                  }
                </div>
              </div>
            </div>
            <div className='pl25 pr25'>
              <Row className='mb30'>
                <Col span={12}>
                  <span className='fc0 ml36'>Online Period：</span>
                  <span>{onlinePeriodStartStr && onlinePeriodStartStr.replace(/-/g, '/')}-{onlinePeriodEndStr && onlinePeriodEndStr.replace(/-/g, '/')}</span>
                </Col>
              </Row>
              <Row className='mb30'>
                <Col span={12}>
                  <span className='ml36 fc0'>Max Quantity：</span>
                  <span>{maxQuantity}</span>
                </Col>
                <Col span={12}>
                  <span className='fc0'>Min Quantity：</span>
                  <span>{minPremium}</span>
                </Col>
              </Row>
            </div>
          </div>
        </Modal>
      </div>)
  }
}

export default connect(state => {
  return state.mainModel
})(Preview)
